import React, { Fragment, PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      sections: [
        { title: '哈哈哈', content: '我是内容，哈哈哈' },
        { title: '呵呵呵', content: '我是内容，呵呵呵' },
      ],
    }
  }

  render() {
    const { sections } = this.state

    return (
      /* <Fragment>
        <h2>App 标题</h2>
        <p>我是App段落</p>
      </Fragment> */

      // fragment语法糖
      <>
        <h2>App 标题</h2>
        <p>我是App段落</p>
        <hr />

        {sections.map((item) => {
          return (
            // 如果要向fragment中添加props，那么就不能使用fragment语法糖形式
            <Fragment key={item.title}>
              <h2>{item.title}</h2>
              <p>{item.content}</p>
            </Fragment>
          )
        })}
      </>
    )
  }
}

export default App
